@import './variables';
//reset

* {
    box-sizing: border-box; //盒子模型
    outline: none; // 取消高亮
}

html {
    font-size: 13px;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.2em;
    background: #f1f1f1;
    -webkit-font-smoothing: antialiased; //字体平滑
    
}

a {
    color: #999;
}
p{
  line-height: 1.5em;
}

@each $colorkey,
$color in $colors {
    .text-#{$colorkey} {
        color: $color;
    }

    .bg-#{$colorkey} {
        background-color: $color;
    }

}

//text
@each $var in (left, center, right) {
    .text-#{$var} {
        text-align: $var !important;
    }

}

@each $dir in (top,right,bottom,left) {
  .border-#{$dir}{
    border-#{$dir}:1px solid $border-color;
  }
  
}
@each $sizekey,
$size in $font-sizes {

    .fs-#{$sizekey} {
        font-size: $size * $base-font-size;
    }
}

// text overflow
.text-ellipsis{
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis2{
  display: inline-block;
  overflow: hidden;
  height: 2.7rem;
  text-overflow: ellipsis;
}
.text-ellipsis3{
  display: inline-block;
  height: 3.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
//width,height
.w-100 {
    width: 100%;
}

.h-100 {
    height: 100%;
}

// flex
.d-flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}


@each $key,
$value in $flex-jc {
    .jc-#{$key} {
        justify-content: $value;
    }
}


@each $key,
$value in $flex-ai {
    .ai-#{$key} {
        align-items: $value;
    }
}

.flex-1 {
    flex: 1;
}

.flex-grow-1 {
    flex-grow: 1;
}


@each $typekey,
$type in $spacing-types {

    // m-1
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}-#{$sizekey} {
            #{$type}: $size * $spacing-base-size;


        }

    }

    // mx-1,my-1
    @each $sizekey,
    $size in $spacing-sizes {
        .#{$typekey}x-#{$sizekey} {
            #{$type}-left: $size * $spacing-base-size;
            #{$type}-right: $size * $spacing-base-size;


        }

        .#{$typekey}y-#{$sizekey} {
            #{$type}-top: $size * $spacing-base-size;
            #{$type}-bottom: $size * $spacing-base-size;


        }

    }

    // mt-1
    @each $directionkey,
    $direction in $spacing-directions {

        @each $sizekey,
        $size in $spacing-sizes {
            .#{$typekey}#{$directionkey}-#{$sizekey} {
                #{$type}-#{$direction}: $size * $spacing-base-size;


            }
        }

    }

}

// button
.btn {
    border: none;
    border-radius: 0.1538rem; //2px
    font-size: map-get($map:$font-sizes, $key:'xs') * $base-font-size;
    padding: 0.4rem 0.8rem;
    &.btn-lg{
      display: flex;
      align-items: center;
      justify-content: center;
      padding: .8rem 1rem;
      border-radius: .4rem;
      background: map-get($map: $colors, $key:'white-1' );
      border:1px solid map-get($map:$colors, $key:'white-2' );
     
      font-size: 1rem;
i{
  color: map-get($map: $colors, $key: 'primary');
  font-weight: bold;
  font-size: 1.5rem;
  margin-right: .5rem;

}

    }
}

// nav
.nav {
    display: flex;

    .nav-item {
        border-bottom: 0.2308rem solid transparent;
        padding-bottom: 0.2rem;

        &.active {
            color: map-get($map: $colors, $key:'primary');
            border-bottom-color: map-get($map: $colors, $key:'primary');
          }


    }
    &.nav-inverse {
        .nav-item {
            color: map-get($map: $colors, $key:'white');
    
            &.active {
    
                border-bottom-color:  map-get($map: $colors, $key:'white');
            }
    
    
        }
    }

}

.nav2 {
  display: flex;
  background-color:  map-get($map: $colors, $key:'light-3');

  .nav-item {
      &.active {
          color: map-get($map: $colors, $key:'white');
          background-color: map-get($map: $colors, $key:'primary');
        }
  }
  &.nav-inverse {
      .nav-item {
          color: map-get($map: $colors, $key:'white');
  
          &.active {
  
              border-bottom-color:  map-get($map: $colors, $key:'white');
          }
  
  
      }
  }

}



// sprite
.sprite {
    background: url('../images/index.png') no-repeat 0 0;
    background-size: 28.8462rem;
    display: inline-block;

    &.sprite-news {
        // 爆料站
        width: 1.7692rem;
        height: 1.5385rem;
        background-position: 63.546% 15.517%;

    }

    &.sprite-arrow {
        width: 0.7692rem;
        height: 0.7692rem;
        background-position: 38.577% 52.076%;

    }

    &.sprite-stories {
        // 故事站
        width: 1.7692rem;
        height: 1.5385rem;
        background-position: 90.483% 15.614%;

    }

    &.sprite-shop {
        // 商城周边
        width: 1.4615rem;
        height: 1.6923rem;
        background-position: 36.746% 0.924%;

    }

    &.sprite-experience {
        // 体验服
        width: 1.5385rem;
        height: 1.5385rem;
        background-position: 10.408% 15.517%;

    }

    &.sprite-newcomer {
        // 新人专区
        width: 1.847rem;
        height: 1.847rem;
        background-position: 89.733% 1%;

    }

    &.sprite-glory {
        // 荣耀传承
        width: 1.8462rem;
        height: 1.8462rem;
        background-position: 36.467% 15%;

    }

    &.sprite-resources {
        // 模拟战资料库
        width: 2.3846rem;
        height: 1.9220rem;
        background-position: 9.302% 0.813%;

    }

    &.sprite-camp {
        // 王者营地 
        width: 1.8462rem;
        height: 1.8462rem;
        background-position: 63.3% 0.927%;

    }

    &.sprite-wechat {
        // 微信公众号
        width: 1.8462rem;
        height: 1.5385rem;
        background-position: 0 96.207%;

    }

    &.sprite-version {
        // 版本
        background: url('../images/version-icon.png') 50% 0% no-repeat;
        width: 100%;
        height: 100%;
        background-size: 1.85rem;
        margin-bottom: -1.9rem;


    }

    &.sprite-djhj {
        // 对局环境
        background: url('../images/djhj.png') 50% 5% no-repeat;
        width: 100%;
        height: 100%;
        background-size: 2.6rem;
        margin-bottom: -1.9rem;

    }

    &.sprite-wxwzt {
        // 无限王者团
        background: url('../images/wxwzt.png') 50% 12% no-repeat;
        width: 100%;
        height: 100%;
        background-size: 3.55rem;
        margin-bottom: -1.9rem;

    }

    &.sprite-cyhdy {
        // 创意互动营
        background: url('../images/cyhdy.png') 50% 0% no-repeat;
        width: 100%;
        height: 100%;
        background-size: 2.2rem;
        margin-bottom: -1.2rem;

    }
}
//span time
.time{
    position:absolute;
    right: .01rem;
    color: map-get($map: $colors, $key:'grey-2' );
}
.skill-border{
  border-radius: 50%;
}
// topBar
.topbar {
  position: sticky; // 吸顶效果
  top: 0;
  z-index: 999;
}
.border-all{
  border: 1x solid #dcdcdc !important;// #dcdcdc
}

.video-border-radio{
  border-radius: 3px;
}

.img-guide-width{
  width:110px;
}

.hero-guide-video {
  img {
    width: 100%;
    height: auto;
  }
  iframe {
    width: 100%;
    height: auto;
  }

  p {
    margin: 0 10px;
    padding: 0;
  }
}
.video-container-all {
  width: 96.5%;
  text-align: center;
  padding-top: 2px ;
  padding-bottom: 5px ;
}

.hero-guide-video-all {
  width: 100%;
}